import React, { FC, useRef } from 'react';
import { useDispatch, useSelector } from 'react-redux'
import { useHistory } from 'react-router-dom'
import { HouseList, TabHouse } from 'components'
import { socket } from 'config/socket'

// RootState 对 useSelector 做了一个注解
// 如何让组件和 仓库 解耦 （就是在组件内部，不要直接调用仓库的代码）

const Home:FC<any> = (props) => {

  const broker:any = useRef()
  const dispatch = useDispatch();
  const history = useHistory()

  return <div>
    <h1 onClick={() => {

    }} >Home</h1>

    <div ref={broker} data-id="0831">李四</div>
    <button onClick={() => {
      console.log(broker.current.dataset.id)
      dispatch({
        type: 'set_broker_id',
        payload: broker.current.dataset.id
      })

      history.push('/chart')


    }}>找李四</button>

    <TabHouse
    list={[{title: 'devin', index: 1}]}
    onClick={(data) => {
      console.log('data:', data)
    }}/>


  </div>
}

export default Home;
